<template>
  <div style="display: flex">
    <a-select :value="innerValue" @select="select" style="flex: 1" @deselect="deselect"
              placeholder="请选择关联对象" mode="multiple" :disabled="!formDefinition.tableName">
      <a-select-option :key="formDefinition.id" :maxTagCount="3">
        [主表]主表字段
      </a-select-option>
      <a-select-option v-for="item in formDefinition.subForms" :key="item.id">
        [{{ item.formName }}] {{ item.formName }}
      </a-select-option>
    </a-select>
    <a-button v-if="!!formDefinition.tableName" @click="selectAll" type="link">全选</a-button>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import {createRelation} from '@comp/hhd/design/relation/types';

export default {
  name: 'RelationObjectSelector',
  model: createModelForVue('value'),
  props: {
    confirmSelect: createProps(Function),
    value: createProps(String),
    relation: createProps(Object, createRelation),
    formDefinition: createProps(Object, createFormDefinition),
  },
  methods: {
    selectAll() {
      let relationTargetFormId = this.relation.relationTargetFormId;
      let relationTargetFormName = this.relation.relationTargetFormName;
      let temp = [this.formDefinition.id, ...(this.formDefinition.subForms.map(s => s.id))];
      let callback = () => {
        this.innerValue = temp;
        this.relation.relationTargetFormId = relationTargetFormId;
        this.relation.relationTargetFormName = relationTargetFormName;
      };
      if (this.confirmSelect) return this.confirmSelect(callback);
      callback();
    },
    deselect(value) {
      let relationTargetFormId = this.relation.relationTargetFormId;
      let relationTargetFormName = this.relation.relationTargetFormName;
      let temp = this.innerValue;
      let callback = () => {
        this.innerValue = temp.filter(i => i !== value);
        this.relation.relationTargetFormId = relationTargetFormId;
        this.relation.relationTargetFormName = relationTargetFormName;
      };
      if (this.confirmSelect) return this.confirmSelect(callback);
      callback();
    },
    select(value) {
      let relationTargetFormId = this.relation.relationTargetFormId;
      let relationTargetFormName = this.relation.relationTargetFormName;
      let temp = this.innerValue;
      let callback = () => {
        this.innerValue = [...temp, value];
        this.relation.relationTargetFormId = relationTargetFormId;
        this.relation.relationTargetFormName = relationTargetFormName;
      };
      if (this.confirmSelect) return this.confirmSelect(callback);
      callback();
    },
    change(value) {
      this.$emit('change', value);
    },
  },
  computed: {
    innerValue: {
      get() {
        if (!this.value) return [];
        return this.value.split(',');
      },
      set(v) {
        if (!v || !v.length) {
          return this.change();
        }
        this.change(v.toString());
      },
    }
  }
};
</script>